<template>
	<view class="container guestlist">
		<myhead :title="mytitle"></myhead>
		<view class="mainlist">
			<view class="item" :class="{active:guestinfotype == 0}" @tap = "chooseguestinfotype(0)">
				基本信息
			</view>
			<view class="item" :class="{active:guestinfotype == 1}" @tap = "chooseguestinfotype(1)">		
				采购信息
			</view>
			<!-- <view class="item" :class="{active:guestinfotype == 2}" @tap = "chooseguestinfotype(2)">		
				还款信息
			</view> -->
		</view>
		<view class="maininfo">
			<view class="box baseinfo" v-if="guestinfotype == 0">
				<view class="userinfo">
					<view class="top">
						<image src="../../static/images/userhead.png" class="userhead"></image>
					</view>
					<view class="name">
						张三
					</view>
					<image src="../../static/images/xiugai.png" class="routericon"></image>
				</view>
				<view class="accountinfo">
					<view class="top">
						业务信息
					</view>
					<view class="info">
						<view class="infoitem money">
							<view class="top">
								<text class="infoicon">￥</text>
								<text class="infomoney">2400</text>
							</view>
							<view class="infotext">采购金额</view>
						</view>
						<view class="infoitem caigou">
							<view class="top">
								<text class="infoicon">￥</text>
								<text class="infomoney">4</text>
							</view>
							<view class="infotext">采购单数</view>
						</view>
						<view class="infoitem sheqian">
							<view class="top">
								<text class="infoicon">￥</text>
								<text class="infomoney">360</text>
							</view>
							<view class="infotext">赊欠金额</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box buyinfo" v-if="guestinfotype == 1">
				<view class="userinfo">
					<view class="buytype all active">
						全部
					</view>
					<view class="buytype sheqian">
						赊欠
					</view>
				</view>
				<view class="accountinfo">
					<view class="item" v-for="(item,index) in orderArray" :key = "index" @tap = "todetail(item.id)">
						<view class="top">
							<text>单号：{{item.title}}</text>
							<view class="money">
								<text>￥{{item.money}}</text>
								<text 
								class="state"
								:style="{backgroundColor:(item.state == '0' ? 'green' : item.state == '1' ? 'red' : 'gray')}"
								v-text="item.state == '0' ? '已结清' : item.state == '1' ? '已赊欠' : '已作废'">
								</text>
							</view>
						</view>
						<view class="middle">
							<view class="each saletime">
								销售时间：{{item.saletime}}
							</view>
							<view class="each ordertime">
								开单时间：{{item.ordertime}}
							</view>
						</view>
						<view class="bottom">
							<view class="products">
								{{item.product.join(',')}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="box batchinfo" v-if="guestinfotype == 2">
				欠款信息
			</view> -->
		</view>
	</view>
</template>

<script>
	import myhead from "../../components/header/header.vue"
	export default {
		data() {
			return {
				mytitle:'客户详情',
				guestinfotype:0,
				orderArray:[
					{
						id:'12312313',//标识记号
						title:'00001/临时客户',
						money:'4530',
						state:'0',//0已结清，1赊欠，2作废
						saletime:'2021-10-10',//销售日期
						ordertime:'2021-10-10 11:29:30',//开单时间
						product:['八爪鱼','黄螺']
					},
					{
						id:'12312313',//标识记号
						title:'00001/临时客户',
						money:'4530',
						state:'1',//0已结清，1赊欠，2作废
						saletime:'2021-10-10',//销售日期
						ordertime:'2021-10-10 11:29:30',//开单时间
						product:['八爪鱼','黄螺']
					}
				]
			};
		},
		methods:{
			chooseguestinfotype(index){
				this.guestinfotype = index
			},
			todetail(id){
				uni.navigateTo({
				    url: `/pages/orderdetail/orderdetail?id=${id}`
				});
			}
		},
		components:{
			myhead
		}
	}
</script>

<style lang="scss" scoped>
.guestlist{
	color: black;
	display: flex;
	flex-direction: column;
	.mainlist{
		display: flex;
		justify-content: space-around;
		color: gray;
		font-size: 30rpx;
		.item{
			padding: 20rpx 20rpx;
			&.active{
				color: #333333;
				border-bottom: 2rpx solid black;
			}
		}
		
	}
	.maininfo{
		flex: 1;
		width: 100%;
		background-color: #EEEEEE;
		box-sizing: border-box;	
		padding: 20rpx;
		.box{		
			.userinfo{
				padding: 20rpx;
				padding-right: 40rpx;
				display: flex;
				border-radius: 16rpx;	
				align-items: flex-start;
				background-color: #FFFFFF;
				margin-bottom: 4rpx;
				.top{
					
					.userhead{
						
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						overflow: hidden;
					}
				}
				.name{
					flex: 1;
					padding: 20rpx 10rpx;
					font-size: 30rpx;
					color: #333333;
				}
				.routericon{
					padding-top: 10rpx;
				}
			}
			.accountinfo{
				padding: 20rpx;
				padding-right: 40rpx;
				border-radius: 16rpx;	
				background-color: #FFFFFF;
				.info{
					display: flex;
					align-items: center;
					justify-content: space-around;
					.infoitem{
						display: flex;
						flex-direction: column;
						align-items: center;
						.top{
							margin-bottom: 4rpx;
							.infoicon{
								font-size: 24rpx;
							}
							.infomoney{
								font-size: 48rpx;
								font-weight: bold;
							}
						}
						.infotext{
							font-size: 24rpx;
						}
						&.money{
							color: #2C405A;
						}
						&.caigou{
							color: #333333;
						}
						&.sheqian{
							color: #DD524D;
						}
					}
				}
			}
			&.buyinfo{
				height: 100%;
				display: flex;
				flex-direction: column;
				.userinfo{
					padding: 10rpx 20rpx;
					.buytype{
						font-size: 24rpx;
						padding: 10rpx 30rpx;
						background-color: #C0C0C0;
						margin-right: 20rpx;
						border-radius: 20rpx;
						font-weight: bold;
						&.active{
							background-color: #2C405A;
							color: #FFFFFF;
						}
					}
				}
				.accountinfo{
					background-color: #eeeeee;
					padding: 0;
					flex: 1;
					.item{
						background-color: #FFFFFF;
						margin-bottom: 20rpx;
						border-radius: 16rpx;
						padding: 10rpx 20rpx;
						box-sizing: border-box;
						.top{
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 10rpx 0;
							font-size: 32rpx;
							font-weight: bold;
							.state{
								margin-left: 10rpx;
								color: #FFFFFF;
								font-size: 24rpx;
								padding: 4rpx 8rpx;
								font-weight: normal;
								
							}
						}
						.middle{
							font-size: 24rpx;
							color: grey;
							padding: 10rpx 0;
							border-bottom: 2rpx solid #dcdfe6;
							.each{
								line-height: 40rpx;
							}
						}
						.bottom{
							padding: 10rpx 0;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
}
</style>
